<template>
  <!-- 设计图外部容器宽750px高师500px，内部容器是300px*200px -->
  <div class="mobile-view">
    <div>{{ count }}</div>
    <div>{{ result }}</div>
    <div>{{ info }}</div>
  </div>
  
  <el-button @click="addCount">addCount</el-button>
  <el-button @click="setInfo">GetInfo</el-button>

  <hr>
  <div>{{ userStore.userName }}手机号是{{ userStore.userPhone }}</div>
  <el-button @click="changeUserName">修改UserName</el-button>
  <el-button @click="resetUserInfo">重置Store</el-button>
  <hr>
  <el-button @click="goDashboard">goDashboard</el-button>
</template>
<script lang="ts" setup>
import useCountStore from '@/views/stores/count'
import userUserStore from '@/views/stores/user'
import {useRouter} from 'vue-router'
import { storeToRefs } from 'pinia';
const countStore = useCountStore()
const userStore = userUserStore()
const router = useRouter()
const {count, result, info} = storeToRefs(countStore)
const {setInfo} = countStore
const changeUserName = () => {
  userStore.userName += '张学友'
}
const resetUserInfo = () => {
  userStore.$reset()
}
const addCount = () => {
  userStore.$patch({
    userName: userStore.userName+'1',
    userPhone: userStore.userPhone +'2'
  })
}
const goDashboard = () => {
  router.push({path: '/home'})
}
// const getInfo = () => {
//   countStore.setInfo()
// }
</script>
<style lang="scss">
.mobile-view {
  width: 200px;
  height: 200px;
  background: #0000FF;
  .child-view{
    width: 100px;
    background: #00FF00;
    height: 100px;
  }
}
</style>